<template>
  <!-- 角色管理 -->
  <div class="app-container">
    <div class="mainbox">
      <dt-table
        v-loading="loading"
        :table-opts="tableOpts"
        :pagination-data="{
          total:total,
          queryParams:queryParams
        }"
        @pagination="getList"
        @searchChange="handleQuery"
        @searchReset="handleReset"
      >
        <template v-slot:operatorBtn="scope">
          <el-dropdown style="padding-left: 10px">
            <el-button v-permission="['ROLEMANAGE_MORE_BUTTON']" size="small">
              更多<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" style="width:120px;text-align:center">
              <el-dropdown-item @click.native="editDataScope(scope.param.roleId)">设置数据范围</el-dropdown-item>
              <el-dropdown-item @click.native="editAssignMenu(scope.param.roleId)">分配功能权限</el-dropdown-item>
              <el-dropdown-item @click.native="editAssignApi(scope.param)">分配接口</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </dt-table>
    </div>
    <role-Edit ref="roleEditRef" />
    <data-scope ref="refDataScope" />
    <assign-menu ref="refAssignMenu" />
    <assign-api ref="refAssignApi" />
  </div>
</template>
<script>
import roleApi from '@/framework/api/permissionCenter/roleManage'
import roleEdit from './components/roleEdit.vue'
import DataScope from './components/roleDataScope.vue'
import AssignMenu from './components/roleAssignMenu.vue'
import AssignApi from './components/roleAssignApi.vue'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'
export default {
  name: 'RoleManage',
  components: {
    roleEdit,
    DataScope,
    AssignMenu,
    AssignApi
  },
  dicts: ['dataScopeType'],
  mixins: [dialogColumn],
  data() {
    return {
      loading: false,
      list: [],
      queryParams: {
        roleName: '',
        roleCode: '',
        pageNo: 1,
        pageSize: 10
      },
      RoleManageList: 0,
      total: 0,
      tableOpts: {
        rowKey: 'roleId',
        toolbarBtn: [
          {
            label: '新增',
            type: 'primary',
            permission: ['ROLEMANAGE_ADD_BUTTON'],
            icon: 'el-icon-plus',
            click: () => {
              this.addData()
            }
          }
        ],
        firstTableCol: {
          'select': false,
          width: 70
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'roleName',
            label: '角色名称',
            show: true,
            search: true
          },
          {
            prop: 'roleCode',
            label: '角色编码',
            show: true,
            search: true
          },
          {
            prop: 'dataScopeType',
            label: '数据范围',
            labelWidth: '110px',
            width: 132,
            show: true,
            type: 'dict',
            formatter: () => { return this.dict.type.dataScopeType }
          },
          {
            prop: 'roleSort',
            label: '排序',
            show: true
          },
          {
            prop: 'remark',
            label: '备注',
            show: true
          }
        ],
        operator: {
          fixed: 'right',
          align: 'center',
          width: 248,
          operatorBtn: [
            {
              'text': '修改',
              permission: ['ROLEMANAGE_UPDATE_BUTTON'],
              click: (row, col, cellValue) => {
                return this.handleEdit(row)
              }
            },
            {
              'text': '删除',
              permission: ['ROLEMANAGE_DEL_BUTTON'],
              type: 'danger',
              click: (row, col, cellValue) => {
                return this.handleDelete(row)
              }
            }
          ]
        },
        tableData: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 列表获取数据
    getList() {
      this.loading = true
      roleApi.fetchList(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.RoleManageList = res.data.rows.length
        this.loading = false
      })
    },
    // 搜索
    handleQuery(formModel) {
      this.queryParams = Object.assign(this.queryParams, formModel)
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        roleName: '',
        roleCode: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    // 添加按钮
    addData() {
      this.$refs.roleEditRef.open('', 'create')
    },
    // 编辑按钮
    handleEdit(row) {
      this.$refs.roleEditRef.open(row, 'update')
    },
    // 设置数据范围
    editDataScope(id) {
      this.$refs.refDataScope.openDataScope(id)
    },
    // 分配功能权限
    editAssignMenu(id) {
      this.$refs.refAssignMenu.openAssignMenu(id)
    },
    // 分配接口
    editAssignApi(row) {
      this.$refs.refAssignApi.openApi(row)
    },
    getRowKey(row) {
      return row.roleId
    },
    // 删除按钮
    handleDelete(row) {
      if (row.roleCode === 'superAdmin') {
        this.$dtMessage({
          type: 'error',
          message: '无法删除超级管理员'
        })
        return
      }
      this.$dtMessageBox({ title: '提示', message: '确定要删除“' + row.roleName + '”吗?', type: 'warning' }).then(() => {
        roleApi.deleteRole(row.roleId).then((res) => {
          this.$dtMessage({
            type: 'success',
            message: '删除成功'
          })
          this.getList()
        })
      }).catch(() => {
        // 取消不做操作
      })
    }

  }
}

</script>

  <style scoped>

  </style>

